<template>
  <div class="buildRateLine" ref="buildRateLine"></div>
</template>

<script lang="ts">
export default {
  name: "buildRateLine"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, reactive } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectMngList } from "/@/api/project";

const buildRateLine = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

let xAxisData = ref([]);
let seriesData = ref([]);

let formInline = reactive({
  projectNameLike: "",
  projectRegionCode: "",
  projectFactoryCode: "",
  projectLeaderNameLike: "",
  projectTypeCode: "",
  projectYear: "",
  createTimeStrStart: "",
  createTimeStrEnd: "",
  pageNum: 1,
  pageSize: 10
});

function initechartInstance(xAxisData?, seriesData?) {
  const echartDom = document.querySelector(".buildRateLine");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    title: {
      text: "验收类型提单率/完成率",
      textStyle: {
        fontSize: 16,
        fontWeight: "normal",
        padding: 10
      }
    },
    color: ["#59a0ff", "#00e6ad", "#ffc500"],
    grid: {
      // bottom: "20%",
      // height: "68%",
      // containLabel: true
    },
    legend: { left: "right" },
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: "category",
      // axisTick: {
      //   alignWithLabel: true
      // },
      axisLabel: {
        formatter: function (params) {
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 5; //一行显示多少个文字
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        }
      },
      // data: xAxisData
      data: [
        "质量检查",
        "材料验收",
        "隐蔽验收",
        "施工试验及见证检测",
        "安全文明"
      ]
    },
    yAxis: {
      type: "value"
    },
    // series: seriesData
    series: [
      {
        name: "提单率",
        data: [150, 230, 135, 147, 260],
        type: "line"
      },
      {
        name: "完成率",
        data: [67, 12, 46, 89, 140],
        type: "line"
      }
    ]
  });
}

const initProjectNum = async () => {
  try {
    const { code, data } = await postProjectMngList(formInline);
    if (code === 200) {
      console.log(11111, data);
      // xAxisData.value = data.xAxisData;
      // const dataKey = Object.keys(data.multiSeriesData);
      // seriesData.value = dataKey.map(item => {
      //   return {
      //     name: item,
      //     data: data.multiSeriesData[item],
      //     type: "line",
      //     label: {
      //       show: true
      //     }
      //   };
      // });
      nextTick(() => {
        initechartInstance(xAxisData.value, seriesData.value);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

initProjectNum();

onMounted(() => {
  nextTick(() => {
    addResizeListener(buildRateLine.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(buildRateLine.value, resetRender);
});
</script>

<style lang="scss" scoped>
.buildRateLine {
  width: 100%;
  height: 100%;
}
</style>
